<template>
   <div>
      <section-box-common v-if="list !== null" :data-list="list.dataUrl"></section-box-common>
   </div>
</template>

<script>
   import sectionBoxCommon from '../../components/section-box-common/section-box-common'
   export default {
      name: 'sectionHotsaleBox',
      data() {
         return {
            list: null
         }
      },
      created() {
         this._initData()
      },
      methods: {
         async _initData() {
            let data = await this.$axios.get('/apis/home/index_center_wrapper', {
               params: {
                  name: 'index_center_wrapper'
               }
            })
            if (data.data.code === 1) {
               this.list = data.data.result
            }
         }
      },
      components: {
         sectionBoxCommon
      }
   }
</script>

<style scoped lang="stylus">
   .index-center-wrapper
      margin-bottom 40px
      h1
         font-size 30px
         font-weight 400
      ul
         margin-top 20px
         display flex
         justify-content space-between
         li
            a
               box-sizing border-box
               padding-top 30px
               display block
               background #fff
               height 400px
               width 303px
               text-align center
               transition all 1s
               box-shadow 0 0 0 transparent
               img
                  margin-bottom 30px
                  height 230px
                  width 116px
               &:hover
                  box-shadow 1px 1px 16px #666
   p:nth-child(3)
      color #666
      font-size 14px
      margin 5px 0
   p.price
      font-size 19px
      font-weight bold
      color red
</style>
